<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <label>String A:
            <input id="radio-a" type="radio" checked="true" name="str-obj" value="a">
        </label>
        <textarea id="str-a" ></textarea>
        <label>String B:
            <input id="radio-b" type="radio" name="str-obj" value="b">
        </label>
        <textarea id="str-b"></textarea>

        <label>Num A：<input id="num-a" type="number" value="0"></label>
        <label>Num B：<input id="num-b" type="number" value="1"></label>
    </div>
    <div>
        <button>获取当前选中输入的内容长度</button>
        <button>当前选中输入中的第3个字符</button>
        <button>把两个输入框的文字连接在一起输出（concat）</button>
        <button>输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）</button>
        <button>输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）</button>
        <button>使用slice获取选中输入框内容的部分内容，参数为num-a及num-b</button>
        <button>当前选中输入框的行数</button>
        <button>使用substr获取选中输入框内容的子字符串，参数为num-a及num-b</button>
        <button>把所选输入框中的内容全部转为大写</button>
        <button>把所选输入框中的内容全部转为小写</button>
        <button>把所选输入框中内容的半角空格全部去除</button>
        <button>把所选输入框中内容的a全部替换成另外一个输入框中的内容</button>
    </div>
    <p id="result"></p>
    <script>
        var num_a = document.getElementById('num-a');
        var num_b = document.getElementById('num-b');
        var result = document.getElementById('result');
        var buttons = document.getElementsByTagName('button');
        var radioA = document.getElementById('radio-a');
        var radioB = document.getElementById('radio-b');
        var strA = document.getElementById('str-a');
        var strB = document.getElementById('str-b');


        //获取当前选中输入的内容长度
        buttons[0].addEventListener('click', function() {
            if (radioA.checked) {
                var a = strA.value;
                if (a == '') {
                    console.log('输入框为空');
                } else {
                    result.innerHTML = a.length;
                }

            }
            if (radioB.checked) {
                var b = strB.value;
                if (b == '') {
                    console.log('输入框为空');
                } else {
                    result.innerHTML = b.length;
                }

            }
        })

        //当前选中输入中的第3个字符
        buttons[1].addEventListener('click', function() {
            if (radioA.checked) {
                var a = strA.value;
                if (a.length < 3) {
                    console.log('输入少于3个字符');
                } else {
                    result.innerHTML = a.charAt(2);
                }

            }
            if (radioB.checked) {
                var b = strA.value;
                if (b.length < 3) {
                    console.log('输入少于3个字符');
                } else {
                    result.innerHTML = b.charAt(2);
                }

            }
        })

        //把两个输入框的文字连接在一起输出（concat）
        buttons[2].addEventListener('click', function() {
             var arr1=[];
             arr1 = strA.value;
             var arr2 = [];
             arr2 = strB.value;
             result.innerHTML=arr1.concat(arr2);
        })

        //输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）
        buttons[3].addEventListener('click', function() {
           var a = strA.value;
           var b = strB.value;
           result.innerHTML=a.indexOf(b);
        })
        
        //输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）
        buttons[4].addEventListener('click', function() {
            var a = strA.value;
           var b = strB.value;
           result.innerHTML=a.lastIndexOf(b);
        })
        //使用slice获取选中输入框内容的部分内容，参数为num-a及num-b
        buttons[5].addEventListener('click', function() {
            var num_A =num_a.value;
            var num_B =num_b.value;
            if (radioA.checked) {
            var arr1=[];
             arr1 = strA.value;
             result.innerHTML=  arr1.slice(num_A, num_B);
            }
            if (radioA.checked) {
            strA.value = ''; 
             var arr2 = [];
             arr2 = strB.value;
             result.innerHTML=  arr2.slice(num_A, num_B);
            }
            
        })

        //当前选中输入框的行数
        buttons[6].addEventListener('click', function() {
          if (radioA.checked) {
            var a = strA.value;
            result.innerHTML='当前选中输入框的行数:'+ a.split(/\r?\n/).length;
             
          } 
          if (radioB.checked) {
            var b = strB.value;
            result.innerHTML='当前选中输入框的行数:'+ b.split(/\r?\n/).length;
            } 
        })
        //使用substr获取选中输入框内容的子字符串，参数为num-a及num-b
        buttons[7].addEventListener('click', function() {
            var num_A =num_a.value;
            var num_B =num_b.value;
            if (radioA.checked) {
            var a = strA.value;
            result.innerHTML=  a.substr(num_A, num_B);
            }
            if (radioB.checked) {
             strA.value = '';  
             var b = strB.value;
             result.innerHTML=  b.substr(num_A, num_B);
            }
        })
        //把所选输入框中的内容全部转为大写
        buttons[8].addEventListener('click', function() {
            if (radioA.checked) {
            var a = strA.value;
            result.innerHTML=  a.toUpperCase();
            }
            if (radioB.checked) {
                var b = strB.value;
            result.innerHTML=  B.toUpperCase();
            }

        })
        //把所选输入框中的内容全部转为小写
        buttons[9].addEventListener('click', function() {
            if (radioA.checked) {
            var a = strA.value;
            result.innerHTML=  a.toLowerCase();
            }
            if (radioB.checked) {
                var b = strB.value;
            result.innerHTML=  b.toLowerCase();
            }

        })
    //把所选输入框中内容的半角空格全部去除
    buttons[10].addEventListener('click', function() {
        if (radioA.checked) {
            var a = strA.value;
            result.innerHTML =a.replace(/\s+/g,'');
        }
        if (radioB.checked) {
            var b = strB.value;
            result.innerHTML =b.replace(' ','');
        }
    })
    
//把所选输入框中内容的a全部替换成另外一个输入框中的内容

buttons[11].addEventListener('click', function() {
    
    var a = strA.value;
    var b = strB.value;
    if (radioA.checked) {
       
        strA.innerHTML =  a.replace(a,b);
    } 
    if (radioB.checked) {
        strB.innerHTML = b.replace(b,a);
    }
})
    </script>
</body>

</html>